"use client"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ProcessingTransactionDialog } from "@/components/processing-transaction-dialog";
import { ProcessingDialog } from "./processing-dialog";
import Web3 from 'web3';
import { useState } from 'react';
import PaymentDialog from "@/components/payment-dialog"

let web3;
let userAccount;
let transactionId;


export function Subscribe({ openPaymentDialog, isVip }) {
  const [isDialogOpen, setIsDialogOpen] = useState(true);
  const showDialog = () => {
    setIsDialogOpen(true);
  };

  const closeDialog = () => {
    setIsDialogOpen(false);
  };

  const payMonth = async () => {
    await connectWallet();
    await sendPayment();
  }


  return (
    <>
      {/* <ProcessingDialog isDialogOpen={isDialogOpen} setIsDialogOpen={setIsDialogOpen}></ProcessingDialog> */}
      <div className="flex flex-col items-center p-6 space-y-6">
        <h1 className="text-3xl font-bold text-center">Maximizing your AI productivity with NeshAI</h1>
        <p className="text-center text-muted-foreground">20+ AI models for the price of one!</p>
        <div className="flex space-x-4">
          <Button variant="outline" className="px-4 py-2">
            Monthly
          </Button>
          {/* <Button className="px-4 py-2">Yearly (save 25%)</Button> */}
        </div>
        <div className="grid gap-6 md:grid-cols-2">
          <Card className="p-6 space-y-4">
            <div className="flex items-center space-x-2">
              <DiamondIcon className="w-6 h-6 text-primary" />
              <h2 className="text-xl font-semibold">NeshAI Pro+</h2>
            </div>
            <div className="text-4xl font-bold text-primary">$20</div>
            <p className="text-muted-foreground">per month</p>
            <Button disabled={isVip} onClick={openPaymentDialog} className="w-full py-2">Subscribe</Button>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">10000 basic queries / month</p>
              </div>
              <p className="text-xs text-muted-foreground">GPT-4o mini, Claude 3 Haiku and more</p>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">1500 advanced queries / month</p>
              </div>
              <p className="text-xs text-muted-foreground">GPT-4o, Claude 3.5, Gemini 1.5 and more</p>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">100 file uploads / month</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">No API key required</p>
              </div>
            </div>
            <h3 className="text-lg font-semibold">Features</h3>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Chat with up to 6 chatbots simultaneously</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Real-time web access</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Chat with images and files</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Save and explore prompts with Prompt Library</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Chat history with full-text searching</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Preview generated code</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Share conversations</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Priority customer support</p>
              </div>
            </div>
          </Card>
          <Card className="p-6 space-y-4">
            <div className="flex items-center space-x-2">
              <InfinityIcon className="w-6 h-6 text-primary" />
              <h2 className="text-xl font-semibold">NeshAI Unlimited</h2>
            </div>
            <div className="text-4xl font-bold text-primary">$39</div>
            <p className="text-muted-foreground">per month</p>
            {/* <Button onClick={showDialog} className="w-full py-2">Subscribe</Button> */}
            <Button disabled={true} className="w-full py-2">Subscribe</Button>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Unlimited basic queries / month</p>
              </div>
              <p className="text-xs text-muted-foreground">GPT-4o mini, Claude 3 Haiku and more</p>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Unlimited advanced queries / month</p>
              </div>
              <p className="text-xs text-muted-foreground">GPT-4o, Claude 3.5, Gemini 1.5 and more</p>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Unlimited file uploads / month</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">No API key required</p>
              </div>
            </div>
            <h3 className="text-lg font-semibold">Features</h3>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Chat with up to 6 chatbots simultaneously</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Real-time web access</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Chat with images and files</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Save and explore prompts with Prompt Library</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Chat history with full-text searching</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Preview generated code</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Share conversations</p>
              </div>
              <div className="flex items-center space-x-2">
                <CheckIcon className="w-4 h-4 text-primary" />
                <p className="text-muted-foreground">Priority customer support</p>
              </div>
            </div>
          </Card>
        </div>
        <div className="flex items-center justify-between w-full p-6 mt-6 border-t">
          <div>
            <h3 className="text-lg font-semibold">Team Plan</h3>
            <p className="text-muted-foreground">
              Unlock the full power of AI for your entire team with flexible, seat-based pricing
            </p>
          </div>
          <Button variant="outline" className="px-4 py-2">
            Contact Us
          </Button>
        </div>
      </div>
    </>

  )
}

function CheckIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M20 6 9 17l-5-5" />
    </svg>
  )
}


function DiamondIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z" />
    </svg>
  )
}


function InfinityIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.33-6 4Z" />
    </svg>
  )
}
